<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 30px">
      <el-card style="width: 80%">
        <div style="font-size: 25px;font-weight: bold;">{{ hotelData.name }}</div>
        <div style="margin-top: 10px"><i class="el-icon-location-information"></i>{{ hotelData.location }}</div>
        <div style="margin-top: 10px;font-weight: bold">房价型号</div>
        <div style="margin-top: 10px;display: flex;align-items: center;justify-items: center">
          <div><i class="el-icon-user">人数</i></div>
          <div style="margin-left: 10px;display: flex;align-items: center">
            <img src="@/assets/床.svg" alt="Icon" style="margin-top: 1px;width: 20px;height: 20px;fill: black"/>床数
          </div>
        </div>
        <div style="margin-top: 20px;font-weight: bold">订房必读</div>
        <div style="margin-top: 10px">
          根据《北京市宾馆不得主动提供的一次性用品目录》相关规定，自2020年5月1日起，宾馆不得主动提供一次性用品，目录含：牙刷、梳子、浴擦、剃须刀、指甲锉、鞋擦。如您需要可联系酒店索取。
        </div>
      </el-card>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
      <el-card style="width: 80%">
        <el-form :model="orderFrom" :rules="rules" ref="fromRef">
          <div
              style="display: flex;align-items: center;justify-items: center;padding-bottom: 10px;border-bottom: 1px solid #e5e5e5">
            <el-form-item prop="dateValue">
              <div style="margin-left: 50px;font-weight: bold">订房日期</div>
              <div class="block" style="margin-left: 30px">
                <el-date-picker
                    v-model="orderFrom.dateValue"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item prop="roomNum">
              <div style="margin-left: 50px;font-weight: bold">房间数</div>
              <div style="margin-left: 30px">
                <el-select v-model="orderFrom.roomNum" placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div style="margin-left: 50px">
            <div style="margin-top: 15px;font-size: 18px;font-weight: bold">住客资料</div>
            <div style="margin-top: 10px;color: #8c939d">请按实际入住人数填写，姓名与证件保持一致</div>

            <div style="display: flex">
              <div style="flex: 1">
                <el-form-item prop="name">
                  <div style="margin-top: 20px">住客姓名</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="每间只需填一人"
                              v-model="orderFrom.name"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>

                <el-form-item prop="email">
                  <div>电子邮件（选填）</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="电子邮件"
                              v-model="orderFrom.email"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>

                <el-form-item prop="phoneNum">
                  <div>电话号码</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="电话号码"
                              v-model="orderFrom.phoneNum"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>
              </div>
              <div style="flex: 1">
                <el-form-item prop="arrivalTime">
                  <div style="margin-top: 20px">预计到店</div>
                  <div style="margin-top: 10px">
                    <el-select v-model="orderFrom.arrivalTime" placeholder="请选择" style="width: 300px" size="medium">
                      <el-option
                          v-for="item in optionsTime"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item prop="id_card">
                  <div>身份证</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="身份证"
                              v-model="orderFrom.id_card"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item prop="arrivalTime">
                  <div>注意事项(选填)</div>
                  <div style="color: #8c939d">我们会将您的需求转达给酒店，但无法确保一定能够满足。</div>
                  <div style="margin-top: 10px">
                    <el-input
                        style="width: 300px"
                        size="medium"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="orderFrom.note">
                    </el-input>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </el-card>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
      <el-card style="width: 80%">
        <div style="display: flex;align-items: center">
          <div style="margin-left: 50px;width: 60px">在线付款</div>
          <div style="margin-left: 10px;color: #409EFF;font-size: 24px;font-weight: bold">
            ￥{{ roomFrom.price * orderFrom.roomNum }}
          </div>
          <!--          房间价格需要新的请求this.RoomData.price-->
          <div style="margin-left: 600px">
            <el-button type="warning" style="width: 100px;height: 66px;font-size: 20px"
                       @click="GoPay()" @keyup.enter="GoPay">确认
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import room from "../business/room.vue";

export default {
  name: "orderDetail",
  data() {
    /**身份证校验
     * 第一、二位是户口所在省、自治区或直辖市的编码；
     * 第三、四位是户口所在市的编码；
     * 第五、六位是户口所在区或县的编码；
     * 第七到十四位是个人出生日期；
     * 第十五、十六位是户口所在派出所编码；
     * 第十七位是代表性别（基数为男性，偶数为女性）；
     * 第十八位是校检码，用0到9的数字或字母X表示。
     * */
    const isCnNewID = (rule, value, callback) => {
      var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子
      var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码
      if (/^\d{17}\d|x$/i.test(value)) {
        var sum = 0, idx;
        for (var i = 0; i < value.length - 1; i++) {
          // 对前17位数字与权值乘积求和
          sum += parseInt(value.substr(i, 1), 10) * arrExp[i];
        }
        // 计算模（固定算法）
        idx = sum % 11;
        // 检验第18为是否与校验码相等
        if (arrValid[idx] == value.substr(17, 1).toUpperCase()) {
          callback()
        } else {
          callback("身份证格式有误")
        }
      } else {
        callback("身份证格式有误")
      }
    }
    return {
      options: [{
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '3',
        label: '3'
      }, {
        value: '4',
        label: '4'
      }, {
        value: '5',
        label: '5'
      }],
      optionsTime: [{
        value: '14:00',
        label: '14:00'
      }, {
        value: '15:00',
        label: '15:00'
      }, {
        value: '16:00',
        label: '16:00'
      }, {
        value: '17:00',
        label: '17:00'
      }, {
        value: '18:00',
        label: '18:00'
      }, {
        value: '19:00',
        label: '19:00'
      }, {
        value: '20:00',
        label: '20:00'
      }, {
        value: '21:00',
        label: '21:00'
      }, {
        value: '22:00',
        label: '22:00'
      }, {
        value: '23:00',
        label: '23:00'
      }, {
        value: '24:00',
        label: '24:00'
      },],
      orderFrom: {
        roomNum: "",
        dateValue: "",
        name: "",
        email: "",
        phoneNum: "",
        arrivalTime: '14:00',
        note: "",
        id_card: "",
      },
      a: "",
      roomFrom: [],
      hotel: [],
      hotelData: {},
      RoomData: [],
      room_id: "",
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      rules: {
        roomNum: [
          {required: true, message: '请输入房间数', trigger: 'blur'},
        ],
        arrivalTime: [
          {required: true, message: '请选择时间', trigger: 'blur'},
        ],
        id_card: [
          {required: true, message: '请输入身份证', trigger: 'blur'},
                    //调用上面定义的方法校验格式是否正确
          {validator: isCnNewID, trigger: "blur"}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        phoneNum: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
          {len: 11, message: '请输入正确的手机号码', trigger: 'blur'}
        ],
        dateValue: [
          {required: true, message: '请选择日期', trigger: 'blur'},
        ],
      }
    }
  },
  //计算日期时间
  computed: {
    room() {
      return room
    },
    formattedStartDate() {
      if (this.orderFrom.dateValue) {
        const startDate = this.orderFrom.dateValue[0];
        const year = startDate.getFullYear();
        const month = String(startDate.getMonth() + 1).padStart(2, '0');
        const day = String(startDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    formattedEndDate() {
      if (this.orderFrom.dateValue) {
        const endDate = this.orderFrom.dateValue[1];
        const year = endDate.getFullYear();
        const month = String(endDate.getMonth() + 1).padStart(2, '0');
        const day = String(endDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    duration() {
      if (this.orderFrom.dateValue) {
        const diff = Math.ceil((this.orderFrom.dateValue[1] - this.orderFrom.dateValue[0]) / (1000 * 60 * 60 * 24));
        return `${diff}`;
      } else {
        return '';
      }
    },

  },
  methods: {
    load_business_id() {
      this.$request.post('/hotel_search/', {
        "business_id": this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.hotel = res.data.hotel_list;
          const length = this.hotel.length;
          this.hotel_id = this.hotel[length - 1].id;
          this.hotelData = this.hotel[length - 1]
          console.log("酒店数据aaa", this.hotelData)
          this.loadH_R_C()
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //去付钱
    GoPay() {
      this.$refs['fromRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/hotel_booking/', {
            "user_id": this.user.id,
            "hotel_id": this.hotel_id,
            "room_type": this.roomFrom.room_type,
            "room_num": this.orderFrom.roomNum,
            "name": this.orderFrom.name,
            "id_card": this.orderFrom.id_card,
            "checkin_date": this.formattedStartDate,
            "checkout_date": this.formattedEndDate,
            "stay_days": this.duration,
            "email": this.orderFrom.email,
            "phone": this.orderFrom.phoneNum,
            "time": this.orderFrom.arrivalTime,
            "note": this.orderFrom.note,
            "price": this.roomFrom.price * this.orderFrom.roomNum,
          }).then(res => {
            if (res.code === '200') {
              const pay_id = res.data.pay_id
              this.$router.push({
                path: '/business/offlinePayment',
                query: {
                  pay_id: pay_id,
                }
              })
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
    ,
    loadH_R_C() {  //展示房间和评论
      const hotel_id = this.hotel_id
      this.$request.get('/hotel_detail/' + hotel_id + "/").then(res => {
        if (res.code == '200') {
          this.hotelData = res.data.hotel
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    }
    ,
  }
  ,
// 获取关键字
  created() {
    this.roomFrom = JSON.parse(this.$route.query.roomFrom)
    console.log("房间数据", this.roomFrom.price)
    this.load_business_id()
  }
}
</script>

<style scoped>

</style>